<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精彩案例</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/wonderful_case.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
    <h1>电商直播解决方案</h1>
    <img src="images/title01.png" style="wtdth:500px;margin: 50px auto 30px;">
    <ul class="main_1">
        <li style="margin-left: 0">
            <label>商品直播导购</label>
            <p style="background-color: #6ec3c8">在电商平台中植入一个直播频道，在直播时段中，有导购人员向用户推介商品。从原有的文字图片介绍，提升至画面，用户可直接看见商品，也可以实时在线与店家互动。</p>
        </li>
        <li>
            <label>体验购物环境</label>
            <p style="background-color: #f8a3c6">诸如跨境电商等平台，可通过导购员直播，让用户直接看到商品的采购源，身临其境地感受购物的乐趣，并对此跨境采购的商品真实性是很好的检验手段。</p>
        </li>
        <li>
            <label>监督生产过程</label>
            <p style="background-color: #8ccdee">通过直播功能，可以让消费者全程参与商品的生产，这是电商平台确保商品质量的有力监督手段，也是舆论公关的新途径。</p>
        </li>
        <li>
            <label>电商品牌营销</label>
            <p style="background-color: #c1e291">电商也可直播其线下活动，有频次地与自己的用户进行互动，如新品发布，售后体验反馈，用户答谢、老用户的二次营销等。</p>
        </li>
    </ul>
    <div class="clearfix"></div>

</div>
<div class="main_2">
    <img src="images/title02.png" style="width:390px;margin: 50px auto 30px;">
    <p>
        <label>电商平台</label>
        <img src="images/main-2p.png">
    </p>
    <p>
        <label>跨境购</label>
        <img src="images/main-p2).png">
    </p>
</div>
<ul class="main_3">
    <li class="main3_0">电商直播功能</li>
    <li class="main3_1">1.使用方便－视频数据采集方便，可支持多种前端硬件，如手机、PC、摄像机等；</li>
    <li class="main3_2">2.支持全高清－支持高清视频直播效果，支持PC端、手机端全屏效果；</li>
    <li class="main3_3">3.支持互动聊天－强大的直播聊天室功能，可支持百万级高并发；</li>
    <li class="main3_4">4.边看边买－用户在收看直播的过程中，可直播选购商品下单购买，为直播商家转化实际营收；</li>
    <li class="main3_5">5.知识分享互动提升客户留存－通过直播与买家进行强互动，告知消费者商品的故事、文化等，活跃买家体验，提升买家留存。</li>
</ul>


<!--轮播-->
<div class="mian_4 clearfix">
    <div class="prev"><a href="javascript:void(0)"></a></div>
    <div class="v_show">

        <div class="v_cont">
            <ul>
                <li index="0" style="background:url('images/lunbo2 (1).jpg')no-repeat center; width:790px;height: 790px;"><label>主播端-PC</label></li>
                <li index="1" style="background:url('images/lunbo2 (2).jpg')no-repeat center; width: 790px;height: 790px;"><label>主播端-移动</label></li>
            </ul>
        </div>

    </div>
    <div class="next"><a href="javascript:void(0)"></a> </div>
</div>




<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">

    $(function(){

        /*======next======*/
        $(".next a").click(function(){ nextscroll() });

        function nextscroll(){

            var vcon = $(".v_cont ");
            var offset = ($(".v_cont li").width())*-1;

            vcon.stop().animate({left:offset},"slow",function(){

                var firstItem = $(".v_cont ul li").first();
                vcon.find("ul").append(firstItem);
                $(this).css("left","0px");

                circle()

            });

        };


        function circle(){

            var currentItem = $(".v_cont ul li").first();
            var currentIndex = currentItem.attr("index");

            $(".circle li").removeClass("circle-cur");
            $(".circle li").eq(currentIndex).addClass("circle-cur");

        }

        //setInterval(nextscroll,2000)

        /*======prev======*/
        $(".prev a").click(function(){

            var vcon = $(".v_cont ");
            var offset = ($(".v_cont li").width()*-1);

            var lastItem = $(".v_cont ul li").last();
            vcon.find("ul").prepend(lastItem);
            vcon.css("left",offset);
            vcon.animate({left:"0px"},"slow",function(){
                circle()
            })

        });

        /*======btn====circle======*/
        var animateEnd = 1;

        $(".circle li").click(function(){

            if(animateEnd==0){return;}

            $(this).addClass("circle-cur").siblings().removeClass("circle-cur");

            var nextindex = $(this).index();
            var currentindex = $(".v_cont li").first().attr("index");
            var curr = $(".v_cont li").first().clone();

            if(nextindex > currentindex){

                for (var i = 0; i < nextindex - currentindex; i++) {

                    var firstItem = $(".v_cont li").first();
                    $(".v_cont ul").append(firstItem);

                }

                $(".v_cont ul").prepend(curr);

                var offset = ($(".v_cont li").width())*-1;

                if(animateEnd==1){

                    animateEnd=0;
                    $(".v_cont").stop().animate({left:offset},"slow",function(){

                        $(".v_cont ul li").first().remove();
                        $(".v_cont").css("left","0px");
                        animateEnd=1;

                    });

                }

            }else{

                var curt = $(".v_cont li").last().clone();

                for (var i = 0; i < currentindex - nextindex; i++) {
                    var lastItem = $(".v_cont li").last();
                    $(".v_cont ul").prepend(lastItem);
                }

                $(".v_cont ul").append(curt);

                var offset = ($(".v_cont li").width())*-1;

                $(".v_cont").css("left",offset);


                if(animateEnd==1){

                    animateEnd=0;
                    $(".v_cont").stop().animate({left:"0px"},"slow",function(){

                        $(".v_cont ul li").last().remove();
                        animateEnd=1;

                    });

                }

            }

        });

    })

</script>
</body>
</html>